<template>
	<view class="content">
		<view class="tab-box">
			<text :class="inx==0?'active':''" @click="changeTab(0)">全部</text>
			<text :class="inx==1?'active':''" @click="changeTab(1)">已添加</text>
		</view>
		<view v-if="inx==0">
			<text class="title">选择班级</text>
			<picker 
			  mode="multiSelector" 
			  :range="multiData" 
			  range-key="name"
			  :value="selectedIndex"
			  @change="handleConfirm"
			  @columnchange="handleColumnChange"
			>
			  <view class="uni-input">
				<text>{{ displayText || '请选择学校年级班级' }}</text>
				<image src="/static/images/icon.png" mode="widthFix"></image>
			  </view>
			</picker>
			
			<view class="student-list">
				<text class="title">学生列表</text>
				<view :class="item.isAdd?'optionB student-item':'student-item'" v-for="item in studentList" @click="gotoPage(item)">
					<view class="student-l">
						<image v-if="!item.isAdd" src="/static/images/icon10.png" mode="widthFix"></image>
						<image v-else src="/static/images/icon11.png" mode="widthFix"></image>
						<text>{{item.xsName}}</text>
					</view>
					<text>{{item.xsSex=='0'?'男':'女'}}</text>
					<image src="/static/images/icon9.png" mode="widthFix"></image>
				</view>
				<!-- 空状态 -->
				<view class="null-box" v-if="studentList.length==0">
					<image src="/static/images/null.png" mode="widthFix"></image>
					<text>暂无数据</text>
				</view>
			</view>
		</view>
		<view v-if="inx==1">
			<view class="student-list">
				<view class="student-item" v-for="item in addList">
					<view class="student-l">
						<image src="/static/images/icon11.png" mode="widthFix"></image>
						<text>{{item.xs_name}}</text>
					</view>
					<text class="number">{{item.number}}</text>
					<view class="student-r" @click="deleteBtn(item)">
						<!-- <image src="/static/images/icon9.png" mode="widthFix"></image> -->
						<image src="/static/images/icon12.png" mode="widthFix"></image>
					</view>
				</view>
				<!-- 空状态 -->
				<view class="null-box" v-if="addList.length==0">
					<image src="/static/images/null.png" mode="widthFix"></image>
					<text>暂无数据</text>
				</view>
			</view>
		</view>
		
		<view style="width: 100%;height: 140upx;"></view>
		<view class="fixed-btn">
			<button @click="gotoIndex">保存建档</button>
		</view>
		
		<!-- 弹窗 -->
		<showModelVue ref="modelPopup" :textWord="'确认要删除吗'" @bindChange='submitDel'></showModelVue>
	</view>
</template>

<script>
	import showModelVue from '../../components/showModel.vue'
	export default {
		components:{showModelVue},
		data() {
			return {
				multiData: [[],[]],
				njData:[],
				selectedIndex: [0,0],
				studentList:[],
				addList:[],
				pageNum:1,
				pageSize:100,
				displayText:'',
				tcnameid:'',
				queueid:'',
				inx:0,
				deleId:''
			}
		},
		onLoad(options) {
			this.tcnameid = options.id
			this.queueid = options.queueid
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			});
			this.getSchool()
			this.getNj()
			setTimeout(()=>{
				this.selectText()
			},1000)
			this.getAdd()
		},
		computed: {
		    
		},
		mounted() {
		   
		},
		methods: {
			changeTab(e){
				this.inx = e
				if(e==1){
					this.getAdd()
				}
			},
			gotoIndex(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			async getAdd(){
				let res = await this.http("get","/tc/tcOperate/tcQueueStudentList",{
					pageNum: 1,
					pageSize: 100,
					queueid: this.queueid
				})
				if(res.code==200){
					this.addList = res.rows
				}
			},
			deleteBtn(item){
				this.$refs.modelPopup.openModel()
				this.deleId = item.id
			},
			async submitDel(){
				let that=this
				let res = await that.http('post','/tc/tcOperate/delTcqueueStudent',{id:that.deleId})
				if(res.code==200){
					that.toast('删除成功')
					that.inx = 0
					that.getAdd()
					that.$nextTick(()=>{
						that.selectText()
					})
				}
			},
			async getSchool() {
				let res = await this.http("post", "/tc/tcOperate/getSchool")
				let data = []
				let res1 = await this.http('get','/system/user/getInfo')
				console.log(res1.user.deptId)
				if(res.code==200){
					res.data.forEach(item=>{
						if(item.deptId == res1.user.deptId){
							data.push({name:item.deptName,id:item.deptId})
						}
					})
					this.multiData[0] = data
					this.getClass(data[this.selectedIndex[0]].id)
					console.log(data)
				}
			},
			async getNj(){
				let res = await this.http("get", "/system/dict/data/type/tc_nj")
				let data=[]
				if(res.code==200){
					if(res.data.length>0){
						res.data.forEach(item=>{
							data.push({name:item.dictLabel,id:item.dictValue})
						})
						this.njData = data
					}
				}
			},
			async getClass(e){
				let res = await this.http("get","/tc/class/list",{bjXxid:e,pageNum:1,pageSize:10})
				let data = []
				if(res.code==200){
					if(res.rows.length>0){
						res.rows.forEach(item=>{
							data.push({name:item.bjName,id:item.id,bjNj:item.bjNj})
						})
						this.$set(this.multiData, 1, data)
					}
					console.log(data)
				}
			},
			selectText(){
				uni.hideLoading();
				let schoolName = this.multiData[0][this.selectedIndex[0]].name
				let njName = ''
				let className = ''
				console.log(this.multiData)
				if(this.multiData[1].length>0){
					njName = this.njData.find(item=>item.id==this.multiData[1][this.selectedIndex[1]].bjNj).name
					className = this.multiData[1][this.selectedIndex[1]].name
					this.displayText = `${schoolName} - ${njName} - ${className}`;
					this.getStudent(this.multiData[0][this.selectedIndex[0]].id,this.multiData[1][this.selectedIndex[1]].id)
				}
			},
			handleColumnChange(e) {
			    const { column, value } = e.detail
				let newIndex = this.selectedIndex
				newIndex[column] = value
				if (column === 0) {
					this.getClass(this.multiData[0][value].id)
					newIndex[1] = 0
				}
				console.log(this.multiData)
				this.selectedIndex = newIndex
			},
			handleConfirm(e) {
			  this.selectedIndex = e.detail.value
			  if(this.multiData[1].length==0){
				  this.toast('没有班级请选择其他')
			  }else{
				  this.selectText()
			  }
			},
			async getStudent(sId,bId){
				let that=this
				let res = await this.http("get","/tc/student/list",{
					xsSchool:sId,xsClassj:bId,pageNum:this.pageNum,pageSize:this.pageSize,
				})
				console.log(res)
				if(res.code==200){
					const result = this.addIsAddProperty(res.rows, that.addList);
					console.log(result)
					this.studentList = result
				}
			},
			addIsAddProperty(arr1, arr2) {
			  // 创建包含arr2所有id的Set
			  const idSet = new Set(arr2.map(item => item.studentid));
			  // 遍历arr1，添加isAdd属性
			  return arr1.map(item => ({
			    ...item,
			    isAdd: idSet.has(item.id)
			  }));
			},
			gotoPage(item){
				if(!item.isAdd){
					uni.navigateTo({
						url:'/pages/student/configure?id='+item.id+'&tcnameid='+this.tcnameid+'&queueid='+this.queueid
					})
				}else{
					this.toast('已添加')
				}
			}
		}
	}
</script>

<style lang="less">
	.fixed-btn{
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		box-shadow: 0upx -8upx 20upx 0upx rgba(0, 0, 0, 0.1);
		padding: 20upx 40upx;
		box-sizing: border-box;
		button{
			border-radius: 120upx;
			background: linear-gradient(0deg, #5EA9FA 0%, #7CB6F5 100%);
			color: #fff;
		}
	}
	.tab-box{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin: 10upx 0 40upx 0;
		text{
			font-size: 32upx;
			line-height: 48upx;
			color: #AAAAAA;
		}
		.active{
			color: #1A1A1A;
			border-bottom: 2px solid #2191F3;
		}
	}
	.uni-input{
		width: 100%;
		line-height: 80upx;
		background-color: #F5F7F9;
		margin-bottom: 20upx;
		padding: 0 20upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 12upx;
		text{
			font-size: 28upx;
		}
		image{
			width: 40upx;
			height: auto;
		}
	}
	.student-list{
		margin-top: 30upx;
	}
	.title{
		font-size: 30upx;
		display: block;
		margin: 20upx 0;
	}
	.optionB{
		opacity: 0.6;
	}
	.student-item{
		width: 100%;
		background-color: #F0F7FA;
		padding: 20upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 12upx;
		.student-l{
			width: 40%;
			display: flex;
			align-items: center;
			image{
				width: 30upx;
				height: auto;
				display: block;
				margin-right: 10upx;
			}
		}
		.student-r{
			image{
				margin-left: 10upx;
			}
		}
		.number{
			background-color: #fff;
			padding: 0 20upx;
			box-sizing: border-box;
			display: block;
			border-radius: 20upx;
		}
		text{
			font-size: 28upx;
		}
		image{
			width: 36upx;
			height: auto;
		}
	}
</style>